.c-indicator {
  --bg: var(--indicator-bg);
  --color: var(--indicator-color);
  padding: var(--su-1);
  text-align: center;
  line-height: 1;
  font-size: var(--fs-s);
  border-radius: var(--radius);
  display: inline-block;
  background: var(--bg);
  color: var(--color);
  min-width: var(--su-2);

  &--success {
    --bg: var(--indicator-success-bg);
    --color: var(--indicator-success-color);
  }

  &--warning {
    --bg: var(--indicator-warning-bg);
    --color: var(--indicator-warning-color);
  }

  &--danger {
    --bg: var(--indicator-danger-bg);
    --color: var(--indicator-danger-color);
  }

  &--info {
    --bg: var(--indicator-info-bg);
    --color: var(--indicator-info-color);
  }

  &--relaxed {
    padding: var(--su-2);
  }

  &--subtle {
    --bg: var(--indicator-subtle-bg);
    --color: var(--indicator-subtle-color);
  }

  &--round {
    border-radius: var(--radius-large);
  }

  &:empty {
    display: none;
  }
}
